<template>
  <div class="musiclist">
    <el-table
      size="medium "
      :data="playlist"
      stripe
      class-name="lei"
      header-row-class-name="table"
      align="center"
      @row-dblclick="playmusic"
    >
      <el-table-column prop="date" label="" width="50" align="center">
        <template slot-scope="scope">
          <span style="color: #aeaeae" v-if="playContent.id !== scope.row.id">{{
            scope.$index + 1
          }}</span>
          <span v-if="playContent.id == scope.row.id"
            ><i
              class="iconfont icon-yinliang"
              :style="{ color: themeColor }"
            ></i
          ></span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="70" align="center">
        <template slot-scope="scope">
          <i
            class="iconfont icon-like-alt"
            style="color: #aeaeae"
            title="收藏音乐"
          ></i>
          <i
            class="iconfont icon-xiazai"
            style="color: #aeaeae"
            title="下载音乐"
            @click="uploadMusic(scope.row.id, scope.row.name)"
          ></i>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="音乐标题">
        <template slot-scope="scope">
          <span
            class="name"
            :title="
              scope.row.alia !== ''
                ? scope.row.name + '(' + scope.row.alia + ')'
                : scope.row.name
            "
            :style="{ color: playContent.id == scope.row.id ? themeColor : '' }"
            >{{ scope.row.name }}</span
          >
          <span
            v-if="scope.row.alia !== ''"
            class="alia"
            :title="scope.row.alia"
            style="color: #aeaeae"
          >
            - ({{ scope.row.alia }})</span
          >
          <span
            v-if="scope.row.mv !== 0"
            class="iconfont icon-shipin1"
            title="播放MV"
            style="vertical-align: middle; padding-left: 0.3125rem"
            :style="{ color: themeColor }"
            @click="toMvDetails(scope.row.mv)"
          ></span>
        </template>
      </el-table-column>
      <el-table-column prop="song" label="歌手">
        <template slot-scope="scope">
          <span
            class="song"
            :title="scope.row.song"
            @click="toSingerdetails(scope.row.aliasId)"
            >{{ scope.row.song }}</span
          >{{ scope.row.song2 !== "" ? "/" : ""
          }}<span
            class="song2"
            :title="scope.row.song2"
            @click="toSingerdetails(scope.row.aliasId2)"
            >{{ scope.row.song2 }}</span
          >{{ scope.row.song3 !== "" ? "/" : "" }}
          <span
            :title="scope.row.song3"
            @click="toSingerdetails(scope.row.aliasId3)"
            >{{ scope.row.song3 }}</span
          >
          {{ scope.row.song4 !== "" ? "/" : "" }}
          <span
            :title="scope.row.song4"
            @click="toSingerdetails(scope.row.aliasId4)"
            >{{ scope.row.song4 }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="album" label="专辑">
        <template slot-scope="scope">
          <span
            class="album"
            :title="scope.row.album"
            @click="toAlbumDetails(scope.row.albumId)"
            >{{ scope.row.album }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="time" label="时长" width="150" align="center">
        <template slot-scope="scope">
          <span class="time" :title="scope.row.time">{{ scope.row.time }}</span>
        </template>
      </el-table-column>
      <div class="empty" slot="empty">暂无...数据</div>
    </el-table>
  </div>
</template>

<script>
// import { getplaylisSongdetail } from "@/api/index.js";
import { getMusicUrl } from "@/api/music.js";
export default {
  name: "MusicList",
  components: {},
  props: {
    playlist: {
      type: Array
    },
    serachText: {
      type: String
    }
  },
  data() {
    return {
      songs: ""
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.themeColor;
    },
    userinfo() {
      return this.$store.state.userinfo;
    },
    playContent() {
      return this.$store.state.playContent;
    }
  },
  watch: {},
  created() {
    // this.userinfo = localStorage.getItem('userInfo')
  },
  mounted() {},
  methods: {
    toSingerdetails(id) {
      this.$router.push({
        path: "singerdetails",
        query: {
          id
        }
      });
    }, // 跳转专辑详情
    toAlbumDetails(id) {
      this.$router.push({
        path: "albumdetails",
        query: {
          id
        }
      });
    }, // 单曲详情
    // toMusicDetails(id) {
    //   this.$router.push({
    //     path: "musicdetails",
    //     query: {
    //       id,
    //       token: this.userinfo.token
    //     }
    //   });
    // },
    toMvDetails(id) {
      this.$router.push({
        path: "mvdetails",
        query: {
          id
        }
      });
    },
    playmusic(row) {
      if (this.serachText !== "search") {
        this.$store.commit("setplaylist", this.playlist);
      }
      this.$store.commit("setContent", row);
    },
    allmusic() {
      this.$store.commit("setplaylist", this.playlist);
      this.$store.commit("setContent", this.playlist[0]);
    },
    // 音乐下载
    async uploadMusic(id, name) {
      const { data } = await getMusicUrl({
        id
      });
      if (data.data[0].freeTrialInfo !== null) {
        this.$confirm("该音乐为VIP音乐,只能下载试听片段,是否下载？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.FileSaver(data.data[0].url, name);
          })
          .catch(() => {});
      } else {
        this.FileSaver(data.data[0].url, name);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.musiclist {
  cursor: pointer;
  margin-bottom: 100px;
}
.icon-like-alt {
  font-size: 1.125rem;
}
.icon-xiazai {
  font-size: 1.375rem;
  margin-left: 0.3125rem;
}
/deep/.cell {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
// /deep/.cell:hover {
//   text-decoration: underline;
// }
/deep/.el-table_1_column_3 .cell .name:hover {
  text-decoration: underline;
}
/deep/.el-table_1_column_3 {
  .cell {
    .icon-shipin1 {
      vertical-align: middle;
      padding-left: 0.3125rem;
    }
    .alia {
      color: #ccc;
      font-size: 0.75rem;
    }
  }
}
/deep/.el-table_1_column_4 .cell .song:hover {
  text-decoration: underline;
}
/deep/.el-table_1_column_4 .cell .song2:hover {
  text-decoration: underline;
}
/deep/.el-table_1_column_5 .cell .album:hover {
  text-decoration: underline;
}
/deep/ .is-leaf {
  text-decoration: none;
}
.icon-shipin1 {
  color: red;
}
.icon-yinliang {
  font-size: 18px;
}
</style>
